<template>
  <view class="identification">
    <view class="identification-outside">
      <view class="identification-label">
        客户识别码：
        <view class="loading" v-if="loading">
          <uni-load-more iconType="circle" status="loading"/>
        </view>
        <canvas canvas-id="logoQRCode" class="identification-code" v-else/>
      </view>
    </view>
    <view class="identification-code-number">
      <progress :percent="count" activeColor="#10AEFF" stroke-width="3" style="width: 150px;margin: 2rpx auto"/>
      <view :class="isShowNumber?'show-number':'hide-number'">
        <text>
          {{ code }}
        </text>
      </view>
    </view>
  </view>

</template>

<script>
import drawQrcode from '@/utils/weapp.qrcode.min.js'
import {getUserCode} from "@/utils/new_file";

export default {
  data() {
    return {
      loading: 0,
      isShowNumber: true,
      code: "123456",
      timer: null,
      count: 60,
      orderNum:undefined
    };
  },
  onLoad(opt) {
    this.getCode()
  },
  methods: {
    /**
     * AUTHOR: 单乘风
     * DESC: 获取验证码
     * */
    getCode() {
      this.loading = true
      getUserCode().then(res => {
        if (res.data.code == 200) {
          this.isShowNumber = false
          setTimeout(() => {
            this.code = res.data.verCode
            this.drawQrcode(this.code)
            this.isShowNumber = true
            this.loading = false
          }, 1000)
          console.log("获取验证码", this.code)
          this.count = 0
          this.getTimer()
        }
      }).catch(res => {
        this.loading = false
        uni.showToast({
          title: "网络无法访问请求，请联系管理员"
        })
      })
    },
    getTimer() {
      this.timer = setInterval(() => {
        if (this.count == 100) {
          clearInterval(this.timer)
          this.getCode()
          // uni.navigateBack({delta: 1})
          return
        }
        this.count++
      }, 1000)
    },
    drawQrcode(data) {
      drawQrcode({
        width: 150,
        height: 150,
        x: 150,
        y: 150,
        canvasId: 'logoQRCode',//canvas的id   <canvas style="width: 300rpx;height: 300rpx;" canvas-id="logoQRCode" />
        typeNumber: 5, //最大27
        text: 'carRental,' + data, //生成的内容
        background: '#FFFFFF', //二维码背景颜色，默认值白色
        foreground: '#000000', //二维码前景色，默认值黑色
        /*image:{ //二维码中间放图片
          imageResource: '../../images/d.png',
          dx: 70,
          dy: 70,
          dWidth: 60,
          dHeight: 60
        },*/
        correctLevel: 2, //非必须，二维码纠错级别，默认值为高级，取值：{ L: 1, M: 0, Q: 3, H: 2 }
        callback(e) {
          console.log('生成二维码报文: ', e)
        }
      });
    }
  },
  destroyed() {
    console.log('销毁定时器')
    clearInterval(this.timer)
  },
  created() {
    //this.drawQrcode(123456)
  },
}
</script>

<style lang="scss">
.identification {
  background-color: #FFF;
  width: 100vw;
  padding-top: 30rpx;
  height: 100vh;

  &-label {

    padding: 30rpx;
    font-size: 30rpx;
    color: #999;

    .loading {
      min-height: 150px;
      min-width: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  &-outside {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-code {
    width: 150px;
    margin: 10rpx auto;

    &-number {
      letter-spacing: 15rpx;
      color: #4e97fe;
      font-size: 60rpx;
      text-align: center;

      .show-number {
        overflow: hidden;
        animation: showNumber ease 1s;
      }

      .hide-number {
        overflow: hidden;
        opacity: 0;
        animation: hideNumber ease 1s;
      }
    ;
    }
  }

}

@keyframes showNumber {
  0% {
    transform: translateY(-50rpx);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes hideNumber {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateY(50rpx);
    opacity: 0;
  }
}
</style>
